import 'package:find_friend/const/const.dart';
import 'package:find_friend/pages/im/model/giftmodel.dart';
import 'package:flutter/material.dart';


class GiftListWidget extends StatefulWidget {

  final List<GiftModel> list;

  final Function(GiftModel model) onSendGift;

  const GiftListWidget({Key key, this.list, this.onSendGift}) : super(key: key);

  @override
  _GiftListWidgetState createState() => _GiftListWidgetState();
}

class _GiftListWidgetState extends State<GiftListWidget> with SingleTickerProviderStateMixin{

  TabController _tabController;
  int page = 0;
  List<GiftModel> list;
  GiftModel selectModel;
  @override
  void initState() {
    super.initState();
    list = widget.list ?? [];
    page = (list.length / 8.0).ceil();
    _tabController = TabController(length: page, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 240,
      decoration: BoxDecoration(
        color: Colors.black45,
        borderRadius: BorderRadius.only(topLeft: Radius.circular(5), topRight: Radius.circular(5)),
      ),
      child: Stack(
        children: [
          PageView.builder(
            itemCount: page,
            pageSnapping: true,
            onPageChanged: (val){
              _tabController.index = val;
            },
            itemBuilder: (context, page){
              int count = page * 8 + 8 > list.length ? (list.length - page * 8) : 8;
              List<GiftModel> models = widget.list.getRange(page * 8, page * 8 + count).toList();
              return Padding(
                padding: const EdgeInsets.all(10),
                child: Wrap(
                  spacing: 30,
                  runSpacing: 4,
                  children: models.map((e) => 
                    InkWell(
                      onTap: (){
                        setState(() {
                          e == selectModel ? selectModel = null : selectModel = e;
                        });
                      },
                      child: _GiftCell(model: e, isselect: selectModel == e,)
                    )
                  ).toList(),
                ),
              );
            }
          ),
          Positioned(
            bottom: 30,
            child: Container(
              width: MediaQuery.of(context).size.width,
              alignment: Alignment.center,
              child: SizedBox(
                height: 20,
                child: TabPageSelector(
                  indicatorSize: 8,
                  color: const Color(0x80FBCF01),
                  selectedColor: APP_main_color,
                  controller: _tabController,
                ),
              ),
            ),
          ),
          Positioned(
            right: 15,
            bottom: 10,
            child: InkWell(
              onTap: (){
                if(widget.onSendGift != null && selectModel != null) widget.onSendGift(selectModel);
              },
              child: Container(
                alignment: Alignment.centerRight,
                padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 5),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.white
                ),
                child: Text("发送", style: instanceTextStyle(11, APP_main_color)),
              ),
            ),
          )
        ],
      )
    );
  }
}

class _GiftCell extends StatefulWidget {

  final GiftModel model;
  final bool isselect;

  const _GiftCell({Key key, this.isselect = false, this.model}) : super(key: key);

  @override
  __GiftCellState createState() => __GiftCellState();
}

class __GiftCellState extends State<_GiftCell> with SingleTickerProviderStateMixin {
  
  Animation<double> _animation;
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(vsync: this, duration: const Duration(milliseconds: 100));
    _animation = Tween<double>(begin: 1.0, end: 1.5).animate(_animationController);
  }
  @override
  void didUpdateWidget(_GiftCell oldWidget) {
    super.didUpdateWidget(oldWidget);
    if(widget.isselect){
      _animationController.forward();
    } else {
      _animationController.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final width = (size.width - 30 * 3 - 10 * 2)  /  4.0;
    return Container(
        width: width,
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          border: Border.all(color: widget.isselect ? APP_main_color : Colors.transparent, width: 0.5),
          borderRadius: BorderRadius.circular(8)
        ),
        child: Column(
          children: [
            ScaleTransition(
              scale: _animation,
              child: Image.network(widget.model.mainimage, height: 40,),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 15.0),
              child: Text(widget.model.name,style: instanceTextStyle(11, Colors.white), maxLines: 1, overflow: TextOverflow.ellipsis,),
            )
          ],
        ),
      );
  }
}